@import url(../../common/less/layout.less);

.slider-contaner {
    margin-top: 10px;

    .left, .main {
        .radius();
        height: 360px;
        background-color: #fff;
    }

    .left {
        float: left;
        width: 200px;
        margin-right: 10px;
        padding: 10px 0px;
        overflow-y: auto;

        li {
            padding: 10px;
            font-size: 14px;
            &.current {
                background-color: @color6;
                color: @color1;
            }
        }

        a:hover {
            text-decoration: underline;
        }
    }

    .main  {
        overflow: auto;
        position: relative;

        ul {
            height: 360px;
            overflow: hidden;

            li {
                display: none;
                &.current {
                    display: block;
                }
            }

            img {
                display: block;
                width: 990px;
                height: 360px;
            }
        }

        .arrow-left, .arrow-right {
            display: none;
            position: absolute;
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, .3);
            top: 0;
            bottom: 0;
            margin: auto;
            border-radius: 50%;
            cursor: pointer;
            color: #fff;

            &:hover {
                background: rgba(0, 0, 0, .5);
            }
        }

        
        &:hover .arrow-left, &:hover .arrow-right {
            display: block;
        }

        .arrow-left {
            left: 20px;
        }

        .arrow-right {
            right: 20px;
        }
    }
}